<template>
  <view class="container">
    <u-popup :show="show" @close="handelClose" :round="10" mode="center">
      <view class="keyboard-container">
        <view class="close" @click="handelClose">
          <image src="/static/imgs/close.png" mode=""></image>
        </view>
        <view class="keyboard-con">
          <!-- 输入与扫码区域 -->
          <view class="input-area">
            <u-search class="phone-input" :disabled="true" @click="handleSearchVip" placeholder="请输入会员手机号"
              v-model="phoneNumber" clearable bgColor="#fff" borderColor="#e5e5e5" :showAction="false"></u-search>
            <view @click="scanCode" class="scan-btn">
              <image src="/static/imgs/scanCode.png" mode=""></image>
              扫码
            </view>
          </view>

          <!-- 自定义数字键盘：左侧数字 + 右侧功能键 -->
          <view class="keyboard">
            <!-- 左侧数字区 + 右侧功能区 -->
            <view class="keyboard-left-right">
              <!-- 左侧：3×4 数字区 -->
              <view class="keyboard-left">
                <view class="keyboard-row">
                  <button @click="inputNumber(1)" class="key">1</button>
                  <button @click="inputNumber(2)" class="key">2</button>
                  <button @click="inputNumber(3)" class="key">3</button>
                </view>
                <view class="keyboard-row">
                  <button @click="inputNumber(4)" class="key">4</button>
                  <button @click="inputNumber(5)" class="key">5</button>
                  <button @click="inputNumber(6)" class="key">6</button>
                </view>
                <view class="keyboard-row">
                  <button @click="inputNumber(7)" class="key">7</button>
                  <button @click="inputNumber(8)" class="key">8</button>
                  <button @click="inputNumber(9)" class="key">9</button>
                </view>
                <view class="keyboard-row">
                  <button @click="inputNumber(0)" class="key zero-key">0</button>
                </view>
              </view>

              <!-- 右侧：清空 + 确认（垂直排列） -->
              <view class="keyboard-right">
                <button @click="clearInput" class="clear-key">清空</button>
                <button @click="confirm" class="confirm-key">确认</button>
              </view>
            </view>
          </view>

        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
  import {
    ref,
    defineEmits
  } from 'vue';

  const emit = defineEmits(['closePopup', 'sureSearch']);
  const props = defineProps({
    productId: String,
    showPopup: Boolean,
    spuId: String,
    type: {
      type: String,
      default: 'goods',
    },
  });

  let show = ref(props.showPopup);
  let spuId = ref(props.spuId);
  const phoneNumber = ref('');

  const handelClose = () => {
    show.value = false;
    emit('closePopup');
  };

  const inputNumber = (num) => {
    phoneNumber.value += num.toString();
  };

  const clearInput = () => {
    phoneNumber.value = '';
  };

  const confirm = () => {
    const phoneReg = /^1[3-9]\d{9}$/;
    if (!phoneReg.test(phoneNumber.value)) {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'none',
        duration: 2000
      });
      return;
    }
    emit('sureSearch', phoneNumber.value);
  };

  const scanCode = () => {
    uni.showToast({
      title: '正在开发中',
      icon: 'none',
    })
    // uni.scanCode({
    //   success: (res) => {
    //     phoneNumber.value = res.result;
    //     uni.showToast({
    //       title: '扫码成功',
    //       icon: 'success',
    //     });
    //   },
    //   fail: () => {
    //     uni.showToast({
    //       title: '扫码失败',
    //       icon: 'none',
    //     });
    //   },
    // });
  };
</script>

<style scoped lang="scss">
  .keyboard-container {
    width: 60vw;
    background: linear-gradient(180deg, #E3F8FF 0%, #FFFFFF 100%);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;

    .close {
      box-sizing: border-box;
      text-align: right;
      padding: 15px 18rpx;

      image {
        width: 14px;
        height: 14px;
      }
    }
  }

  .keyboard-con {
    padding: 0 70px 52px;
    box-sizing: border-box;
  }

  .input-area {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }

  .phone-input {
    flex: 1;
    height: 40px;
    line-height: 40px;
    padding: 0 8px;
    margin-right: 8px;
    font-size: 14px;
  }

  .scan-btn {
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    padding: 0 35px;
    background: #0F90FD;
    border-radius: 21px;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    margin-left: 10px;

    image {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
  }

  .keyboard {
    padding: 35px 40px;
    box-sizing: border-box;
    background: rgba(208, 211, 217, 0.44);
    border-radius: 10px;
  }

  /* 左右布局容器 */
  .keyboard-left-right {
    display: flex;
    justify-content: space-between;
  }

  /* 左侧数字区：占比 3/4 */
  .keyboard-left {
    flex: 3;
    display: flex;
    flex-direction: column;
  }

  .keyboard-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .key {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    margin-right: 10px;
    font-size: 16px;
  }

  .zero-key {
    flex: 3;
  }

  .keyboard-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .clear-key {
    width: 100%;
    height: 40px;
    margin-bottom: 8px;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    margin-right: 10px;
    font-size: 16px;
  }

  .confirm-key {
    width: 100%;
    flex: 1;
    background: #0F90FD;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;

    &::after {
      border: none;
    }
  }
</style>
